import React, { useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import {
    Button,
    Cascader,
    Checkbox,
    ColorPicker,
    DatePicker,
    Form,
    Input,
    InputNumber,
    Radio,
    Select,
    Slider,
    Switch,
    TreeSelect,
    Upload,
    Image



} from 'antd';
import Recording from './Recording';

const { RangePicker } = DatePicker;
const { TextArea } = Input;

const normFile = (e: any) => {
    if (Array.isArray(e)) {
        return e;
    }
    return e?.fileList;
};

const BasicInformation: React.FC = () => {
    const [componentDisabled, setComponentDisabled] = useState<boolean>(false);

    return (

        <>
            {/* <Checkbox
                checked={componentDisabled}
                onChange={(e) => setComponentDisabled(e.target.checked)}

            >
                Form disabled
            </Checkbox> */}
            <Form
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
                layout="horizontal"
                disabled={componentDisabled}
                style={{ maxWidth: 600 }}
            >

                <h2>基础信息</h2>

                <Form.Item label="商品名称">
                    <Input style={{ border: 'none' }} value='商品名称' />
                </Form.Item>
                <Form.Item label="权益类型">
                    <Input style={{ border: 'none' }} value=' ' />
                </Form.Item>
                <Form.Item label="描述信息">
                    <TextArea style={{ border: 'none' }} rows={4} value=' ' />
                </Form.Item>
                <Form.Item label="类目">
                    <Input style={{ border: 'none' }} value=' ' />
                </Form.Item>
                <Form.Item label="服务保障">
                    <TextArea style={{ border: 'none' }} rows={4} value=' ' />
                </Form.Item>
                <Form.Item label="兑换限制">
                    <InputNumber style={{ border: 'none' }} value=' ' />
                </Form.Item>
                <Form.Item label="创建时间">
                    <Input style={{ border: 'none' }} value=' ' />
                </Form.Item>
                <Form.Item label="修改时间">
                    <Input style={{ border: 'none' }} value=' ' />
                </Form.Item>
                <Form.Item label="展示时间">
                    <Input style={{ border: 'none' }} value=' ' />
                </Form.Item>

                <Form.Item label="商品图片">
                    <Image
                        width={200}
                        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                    />

                </Form.Item>
                <h2>投放城市</h2>
                <Form.Item label="城市白名单">
                    <Input style={{ border: 'none' }} value=' 河南' />
                </Form.Item>
                <Form.Item label="城市黑名单">
                    <Input style={{ border: 'none' }} value=' ' />
                </Form.Item>
                <h2>供应商信息</h2>
                <Form.Item label="供应商名称">
                    <Input style={{ border: 'none' }} value=' 我叫供应商' />
                </Form.Item>
                <Form.Item label="供应商联系方式">
                    <Input style={{ border: 'none' }} value=' 18737001938' />
                </Form.Item>
                <div ><Recording /></div>


            </Form>
        </>
    );
    // return <div><BasicInformation {...normFile} /></div>;
};

export default BasicInformation;